/**
 * Created by Administrator on 2017/7/13 0013.
 */
/**
 *定义组件id
 */
var head , foot , backdrop , leftnav , rightnav;

//页头
avalon.component('ms-head',{
   template : '<header><a class="btn" ms-on-touchstart="@showleft"><i class="icon-list" ms-on-touchstart="@showleft"></i></a><p>欢迎,sitename</p><p>用户名<a href="#">登录</a></p></header>',
    defaults :  {
        onInit : function (e) {
            head = e.vmodel;
        },
        showleft : function(event){
            event.preventDefault();
            var length = $('.left-nav').eq(0).css('left');
            left = parseInt(length) == 0 ? '-50vw' : '0';
            $('.left-nav').eq(0).animate({
                'left':left
            },500,function () {
                backdrop.maskcss = left == '-50vw' ? {display : 'none'} : {display : 'block'};
            });
        }
    }
});
//页脚
avalon.component('ms-footer',{
   template : '<footer><div class="foot"><div class="qrcode"><img src="./images/avatar-ts-hamm.png"></div><div class="info"><p><span>内容1</span><a href="#">最流行的模板语言.</a></p><p><span>内容2</span><a href="#">一套构建用户界面的渐进式框架.</a></p><p><span>内容3</span><a href="#">Lodash 是一个 JavaScript 工具库</a></p></div></div><p class="num">京ICP备11008151号京公网安备11010802014853</p></footer>',
   defaults : {
        onInit : function (e) {
            foot = e.vmodel;
        }
   }
});

//Mask 蒙板
avalon.component('ms-backdrop',{
    template : '<div class="mask" ms-on-touchstart="@closeMask" ms-css="@maskcss"></div>',
    defaults : {
        onInit : function (e) {
            backdrop = e.vmodel;
        },
        maskcss : {display:'none'},
        closeMask : function (event) {
            event.preventDefault();
            backdrop.maskcss = { display:'none' };
            $('.float-nav').animate({
                'right':'-30%'
            },500,function () {
                console.log('nav closing');
            });
            $('.left-nav').animate({
                'left':'-50vw'
            },500,function () {
                console.log('left closing');
            });
        }
    }
});


//左侧导航组件
avalon.component('ms-leftnav',{
   template : '<div class="left-nav"><ul class="list-group"><li class="list-group-item"><a href="#">1</a></li><li class="list-group-item"><a href="#">2</a></li><li class="list-group-item"><a href="#">3</a></li><li class="list-group-item"><a href="#">4</a></li></ul></div>',
   defaults : {
        onInit : function (e) {
            leftnav = e.vmodel;
        }
   }
});

//右侧导航组件
avalon.component('ms-rightnav',{
   template : '<div class="float-nav"><div class="shuqian"><a type="button" ms-on-touchstart="@showNavs" class="btn btn-warning">显</a></div><ul class="list-group"><li class="list-group-item"><a href="#">一</a></li><li class="list-group-item"><a href="#">二</a></li><li class="list-group-item"><a href="#">三</a></li><li class="list-group-item"><a href="#">四</a></li><li class="list-group-item"><a href="#">无</a></li></ul></div>',
   defaults : {
       onInit : function (e) {
           rightnav = e.vmodel;
       },
       showNavs : function () {
           var length = $('.float-nav').eq(0).css('right');
           right = parseInt(length) == 0 ? '-30%' : '0';
           $('.float-nav').eq(0).animate({
               'right':right
           },500,function () {
               backdrop.maskcss = right == '-30%' ? {display : 'none'} : {display : 'block'} ;
           });
       }
   }
});






